<template>
	<div class="box">
		<!-- false-box这是一个用来显示滚动条的方法 -->
		<div class="false-box">
			<div class="scroll-box" :style="{'height': scollBoxHeight + 'px'}">
				<!-- scroll-box是用来撑起盒子的方法 -->
			</div>
		</div>
		<div class="table-box">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="date" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				allData: [],
				tableData: [],
				elTableHeight: '', //el-table的高度
				theadHeight: '', //表头的高度
				contentHeight: 0, //主要内容高度
				showRowCount: 0, //一共能显示多少行 
				falseBox: 0, //后边假盒子的高度
				scollBoxHeight: 0, //假滚动条的高度
				scrollTopRowCount: 0, //一共向上滚动了多少行
			}
		},
		mounted() {
			// let that = this;
			// // 模拟一万条假数据
			// for (let i = 0; i < 10000; i++) {
			// 	this.allData.push({
			// 		date: i + 1,
			// 		name: '王小虎',
			// 		address: '上海市普陀区金沙江路 1518 弄'
			// 	})
			// }
			// this.scollBoxHeight = 45 * this.allData.length + 45; //多加一行，要不然滚动到底差一行
			// this.$nextTick(() => {
			// 	this.elTableHeight = document.querySelector('.table-box .el-table').offsetHeight;
			// 	this.theadHeight = document.querySelector('.table-box .el-table__header-wrapper').offsetHeight;
			// 	this.contentHeight = this.elTableHeight - this.theadHeight;
			// 	this.showRowCount = Math.floor(this.contentHeight / 45);
			// 	// 获取默认显示的前 <showRowCount> 条
			// 	this.tableData = JSON.parse(JSON.stringify(this.allData)).splice(0, this.showRowCount);
			// })
			// this.falseBox = document.querySelector('.false-box');
			// this.falseBox.addEventListener('scroll', function(e) {
			// 	that.scrollTopRowCount = Math.ceil(e.target.scrollTop / 45);
			// 	// 获取从索引<scrollTopRowCount> 开始 <showRowCount> 条
			// 	that.tableData = JSON.parse(JSON.stringify(that.allData)).splice(that.scrollTopRowCount, that
			// 		.showRowCount);
			// });
		},
	}
</script>
<style>
	.box {
		width: 1000px;
		height: 500px;
		overflow: hidden;
		position: relative;
	}
	.table-box {
		width: calc(100% - 20px);
		height: 100%;
		position: absolute;
		top: 0%;
		left: 0%;
	}
	.false-box {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0%;
		left: 0%;
		overflow: auto;
	}
	.scroll-box {
		width: 100%;
		height: 1000px;
		position: absolute;
		top: 0%;
		left: 0%;
	}
	::v-deep .el-table {
		width: 100%;
		height: 100%;
	}
	.el-table .el-table__row {
		height: 45px;
	}
	
	.el-table__row td {
		padding: 0px
	}
</style>